<template>
  <div class="updateInfo">
      <!-- <h2>账户信息修改</h2> -->
      <div class="title">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/layout/layoutshouye' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>账户更新</el-breadcrumb-item>
          <el-breadcrumb-item>账户信息更新</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-form :model="userForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户账号" prop="userAccount" required>
            <el-input v-model="userForm.userAccount" :disabled="isInput"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="userName" required>
            <el-input v-model="userForm.userName" :disabled="isInput"></el-input>
          </el-form-item>
          <el-form-item label="昵称" prop="Nickname" required>
            <el-input v-model="userForm.Nickname"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
              <el-select v-model="userForm.sex" placeholder="请选择你的性别">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
          <el-form-item label="信誉积分" prop="userCredit" required>
            <el-input v-model="userForm.userCredit" :disabled="isInput"></el-input>
          </el-form-item>
          <el-form-item label="注册时间" prop="userCreatetime" required>
            <el-input v-model="userForm.userCreatetime" :disabled="isInput"></el-input>
          </el-form-item>
          <el-form-item label="用户图片" prop="userImg" required>
              <el-button type="primary" @click="dialogVisibleImg = true">上传图片</el-button>
              <img v-if="userForm.userImg" :src="userForm.userImg" height="100px" style="margin:10px;display:inline-block" alt="">
          </el-form-item>
          <el-form-item label="手机号" prop="userPhone" required>
            <el-input v-model="userForm.userPhone"></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="userAddress" required>
            <el-input v-model="userForm.userAddress"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">确定更新</el-button>
            <el-button @click="clearForm()">重置</el-button>
          </el-form-item>
        </el-form>

        <el-dialog
          title="上传图片"
          :visible.sync="dialogVisibleImg"
          width="30%"
          :before-close="handleClose">
             <!-- 
              ref="upload" id-获取dom元素
              action	必选参数，上传的地址
              on-preview	点击文件列表中已上传的文件时的钩子
              on-remove	文件列表移除文件时的钩子
              on-success	文件上传成功时的钩子
              on-error	文件上传失败时的钩子
              on-progress	文件上传时的钩子
              file-list	上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] 数组类型
              http-request  覆盖默认的上传行为，可以自定义上传的实现
              方法：
              submit	手动上传文件列表
              limit	最大允许上传个数
            -->
            <el-upload
              class="upload-demo"
              ref="upload"
              :action="'http://localhost:8080/api/getimg/upload'"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="successUpload"
              :http-request="upload"
              :limit = '1'
              :auto-upload="false">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
            </el-upload>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisibleImg = false">取 消</el-button>
              <el-button type="primary" @click="showImg">确 定</el-button>
            </span>
        </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    name:"UserUpdateinfo",
    data() {
      return {
        // 表单是否能修改
        isInput:true,
        userlist : [],//所有用户信息
        dialogVisibleImg:false,
        date1:'',
        date2:'',
        userForm:{
            userId:'',
            userAccount:'',
            userName:'',
            Nickname:'',
            sex:'',
            userCredit:'',
            userCreatetime:'',
            userImg:'',
            userPhone:'',
            userAddress:''
        },
        rules: {//element组件校验规则
          userPhone: [
            { required: true, message: '请输入新闻标题', trigger: 'blur' },
            { min: 11, max: 11, message: '长度在11字符', trigger: 'blur' }
          ],
        },
      }
    },
    created() {
      this.getUser()
    },
    mounted() {
      
    },
    methods: {
      // 获取根据用户id获取的用户信息
      getUser(){
        this.userlist = this.$store.state.user.userlist
        this.userForm.userId = this.userlist.userId
        this.userForm.userAccount = this.userlist.userAccount
        this.userForm.userName = this.userlist.userName
        this.userForm.Nickname = this.userlist.Nickname
        this.userForm.sex = this.userlist.sex
        this.userForm.userCredit = this.userlist.userCredit
        this.userForm.userCreatetime = this.userlist.userCreatetime
        this.userForm.userImg = this.userlist.userImg
        this.userForm.userPhone = this.userlist.userPhone
        this.userForm.userAddress = this.userlist.userAddress
        console.log("所有用户信息1",this.userlist)
      },
      showImg(){
        this.dialogVisibleImg = false
        this.userForm.userImg = this.url
      },
       handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      clearForm(){
        // 清空表单
        // this.$refs.ruleForm.resetFields()
        // this.newsForm.newsImg = ''
        this.userForm.Nickname = ''
        this.userForm.sex = ''
        this.userForm.userImg = ''
        this.userForm.userPhone = ''
        this.userForm.userAddress = ''
      },
      // 更新发布新闻的资讯
      submitForm(formName){
        console.log(this.$refs[formName])
        this.$refs[formName].validate((valid)=>{
          if(valid){
            axios.get("http://localhost:8080/api/updateUser/updateUserlist",{
              params:{
                userName:this.userForm.userName,
                Nickname:this.userForm.Nickname,
                userAccount:this.userForm.userAccount,
                userPassword:this.userlist.userPassword,
                userCredit:this.userForm.userCredit,
                userCreatetime:this.userForm.userCreatetime,
                sex:this.userForm.sex, 
                userPhone:this.userForm.userPhone,
                userAddress:this.userForm.userAddress,
                payPassword:this.userlist.payPassword,
                userImg:this.userForm.userImg,
                userId:this.userForm.userId
              }
            }).then(
              res=>{
                this.$message({
                  message:'用户信息修改成功',
                  type:'success'
                })
                // 修改成功之后刷新一下页面
                this.$router.go(0)
              },
              error=>{
                console.log("b",error.message)
              }
            )
            console.log("获取更新信息为",this.userForm)
          }else{
            console.log("提交错误")
            return false
          }
        })
      },
      upload(f) {
        // console.log(f)
        //  1. 获取表单数据   fromData 表单数据
        let fromData = new FormData()
        fromData.append("file", f.file)
        // 2. 发起请求
        axios({
          method: 'post',
          url: f.action,
          data: fromData
        }).then(res => {
          // 3. 请求成功之后  图片回显
          console.log(res)
          this.url = res.data.url
          this.$message({
            message:'图片上传成功',
            type:'success'
          })
        })
      },
      // 上传成功的函数
      successUpload(response,file,fileList){
        console.log("上传成功了",response,file,fileList)
        this.$message({
          message:'图片上传成功',
          type:'success'
        })
      },
      // 点击上传按钮的事件
      submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
    },
}
</script>

<style lang="less" scoped>
.updateInfo{
  margin: 20px;
  width: 100%;
  .title{
    width: 95%;
    padding: 10px;
    background: #fff;
    border: 1px solid #eee;
    margin-bottom: 20px;
  }
  .el-form{
    width: 95%;
  }
}
</style>